<script>
export default {
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      rules:{
        username:[
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    submit(aa){
      this.$refs[aa].validate((valid) => {
        if (valid) {
          this.$http.post('http://43.143.190.87:8182/login?username='+this.form.username+'&pwd='+this.form.password)
              .then((res)=>{
                if(res.data.code===1){
                  this.$message({
                    message: '登录成功！',
                    type: 'success'
                  })
                  this.$router.push('/main')
                }else {
                  this.$message.error('账号或密码错误！')
                }
              })
              .catch(error=>{
                this.$message.error('服务器异常！')
              })
        } else {
          this.$message.error('输入用户名或密码不合法！');
          return false;
        }
      });
    },
    reset(aa){
      this.$refs[aa].resetFields();
    }
  }
}
</script>

<template>
<div class="login">
  <el-form class="el-form" :rules="rules" ref="form" :model="form" label-width="80px">
    <h2>胖虎到家登录页面</h2>
    <el-form-item label="账号" prop="username">
      <el-input v-model="form.username" placeholder="请输入姓名" prefix-icon="el-icon-user-solid"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-key"></el-input>
    </el-form-item>
    <el-form-item id="lo">
      <el-button type="primary" @click="submit('form')">登录</el-button>
      <el-button @click="reset('form')">取消</el-button>
    </el-form-item>
  </el-form>
</div>
</template>
<style scoped>
body{
  margin: 0;
  padding: 0;
}
.login{
  height: 100vh;
  background-image: url("../assets/login_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
}
.el-form{
  text-align: center;
  width: 500px;
  margin: 150px auto;
  border: 2px solid lightseagreen;
  padding: 20px 30px;
  background-color: rgba(255,255,255,.5);
  border-radius: 20px;
}
#lo{
  margin-left: -66px;
}
</style>